import { Layout, Button, Space, Modal, message } from 'myselfantd';
import React, { useState, useEffect, useMemo } from 'react';
import type { ColumnsType, TableProps } from 'antd/es/table';
import StaticContent from './StaticContent';
import styles from './index.module.scss';
// import { getList } from '../api';

interface DataType {
  code: number;
  work: string;
  operateArea: number;
  operateDistance: number;
  taskEndTime: string;
  taskStatus: number;
  evaluationState: number;
  option: [];
}
type TYPE = 'view' | 'add' | 'edit';
interface Props {
  viewmode?: TYPE;
  data?: any;
  onChange?: Function;
}
const App: React.FC<Props> = (props) => {
  let { viewmode, data, onChange } = props;
  const [tableData, setTableData] = useState({
    data: [] as ColumnsType<DataType>,
    page: { total: 0, pageSize: 10, current: 1 },
  } as any);
  const [editData, setEditData] = useState<any>([]);
  const [units, setUnits] = useState<any>([]);
  useEffect(() => {
    // if (data) {
    //   getList({}).then(({ result }: any) => {
    //     setUnits(result);
    //     setTableData({
    //       data: data as ColumnsType<DataType>,
    //       page: { total: data.length, pageSize: 20, current: 1 },
    //     });
    //   });
    // } else {
    //   getList({}).then(({ result }: any) => {
    //     setUnits(result);
    //   });
    // }
  }, [data]);

  const [curState, setCurState] = useState([false, 'view'] as [boolean, TYPE]);
  return (
    <>
      <Layout.PageTemplate
        padding={0}
        height={0}
        title="静态参数"
        tabBarExtraContent={useMemo(
          () =>
            viewmode === 'add' && (
              <Button.Image
                size="large"
                style={{ position: 'absolute', right: '10px', top: '10px' }}
                type="primary"
                onClick={() => setCurState([true, 'add'])}
                icon={'add'}
              >
                添加参数
              </Button.Image>
            ),
          [],
        )}
        search={false}
        table={useMemo(
          () => ({
            template: [
              {
                title: '序号',
                width: 150,
                fixed: 'left',
                align: 'left',
                render: (text, record, index) => {
                  return index + 1;
                },
              },
              {
                title: '参数名称',
                width: 150,
                fixed: 'left',
                align: 'left',
                dataIndex: 'name',
              },
              {
                title: '参数编号',
                width: 150,
                textWrap: 'word-break',
                align: 'left',
                dataIndex: 'code',
              },
              {
                title: '参数值',
                width: 150,
                textWrap: 'word-break',
                align: 'left',
                dataIndex: 'value',
              },
              {
                title: '参数单位',
                width: 120,
                textWrap: 'word-break',
                ellipsis: true,
                align: 'left',
                dataIndex: 'unitId',
                render: (id: any) => {
                  console.log(units, '---units----');
                  return units.find((item: any) => item.id === id)?.name;
                },
              },
              viewmode !== 'view' && {
                title: '操作',
                width: 240,
                render: (_, record, index) => (
                  <Space size="middle">
                    <Button
                      type="link"
                      block
                      onClick={() => {
                        setEditData([{ ..._, sortKey: index + 1, key: index + 1 }]);
                        setCurState([true, 'edit']);
                      }}
                    >
                      编辑
                    </Button>
                    <Button
                      type="link"
                      block
                      onClick={() => {
                        let data = tableData.data;
                        data.splice(index, 1);
                        setTableData({
                          data: data as ColumnsType<DataType>,
                          page: { total: data.length, pageSize: 20, current: 1 },
                        });
                        onChange && onChange(data);
                        message.info('删除静态属性成功,请保存更新');
                      }}
                    >
                      删除
                    </Button>
                  </Space>
                ),
              },
            ] as ColumnsType<DataType>,
            data: tableData,
            attrs: {
              y: 200,
            },
          }),
          [tableData],
        )}
      />
      {viewmode !== 'view' && (
        <Modal.Dialog
          title={viewmode === 'add' ? '添加静态属性' : '编辑静态属性'}
          showDialog={curState[0]}
          changeDialog={(val: boolean) => setCurState([val, 'view'])}
          size={'middle'}
        >
          <StaticContent
            viewmode={curState[1]}
            close={() => setCurState([false, curState[1]])}
            onFinish={(val: any[]) => {
              let data = [];
              if (viewmode === 'add') {
                data = [...tableData.data, ...val];
              } else {
                for (let i = 0; i < tableData.data.length; i++) {
                  for (let j = 0; j < val.length; j++) {
                    if (tableData.data[i].id === val[j].id) {
                      data.push(val[j]);
                    } else {
                      data.push(tableData.data[i]);
                    }
                  }
                }
              }
              onChange && onChange(data);
              setTableData({
                data: [...data] as ColumnsType<DataType>,
                page: { total: data.length, pageSize: 20, current: 1 },
              });
              setCurState([false, curState[1]]);
            }}
            data={editData}
          />
        </Modal.Dialog>
      )}
    </>
  );
};

export default App;
